<template>
    <div class="register">
        <div class="box">
            <img src="../assets/images/left-text.png" alt="" class="left-text">
            <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
                <h3 class="title">欢迎使用翻译管理系统</h3>
                <el-form-item prop="email">
                    <el-input v-model="registerForm.email" type="text" size="large" auto-complete="off" placeholder="邮箱"
                        @keyup.enter='handleRegister' :maxlength="25">
                        <template #prefix>
                            <svg-icon icon-class="email" class="el-input__icon input-icon" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="registerForm.password" type="password" size="large" auto-complete="off"
                        placeholder="密码" @keyup.enter="handleRegister" show-password>
                        <template #prefix>
                            <svg-icon icon-class="password" class="el-input__icon input-icon" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input v-model="registerForm.confirmPassword" type="password" size="large" auto-complete="off"
                        placeholder="确认密码" @keyup.enter="handleRegister" show-password>
                        <template #prefix>
                            <svg-icon icon-class="password" class="el-input__icon input-icon" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="验证码"
                        style="width: 63%" @keyup.enter="handleRegister">
                        <template #prefix>
                            <svg-icon icon-class="validCode" class="el-input__icon input-icon" />
                        </template>
                    </el-input>
                    <div class="register-code">
                        <el-button :loading="emailLoading" :disabled="sendStateObj.lock" @click="getCode"
                            class="register-code-img">{{
                                emailLoading ? '获取中...' : sendStateObj.text
                            }}
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button :loading="loading" size="large" type="primary" style="width:100%;"
                        @click.prevent="handleRegister">
                        <span v-if="!loading">注 册</span>
                        <span v-else>注 册 中...</span>
                    </el-button>
                    <div style="float: right;">
                        <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!--  底部  -->
        <div class="el-register-footer">
            <span>Copyright © 2023 TLate All Rights Reserved.</span>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getCurrentInstance, ref } from "vue";
import { getMailCode } from "@/api/system/user";
import useUserStore from "@/store/modules/user";

const router = useRouter();
const { proxy } = getCurrentInstance();
/*发送验证码的按钮状态*/
const sendStateObj = ref({
    sec: 60,
    lock: false,
    timer: undefined,
    text: '获取验证码'
});
const registerForm = ref({
    nickname: "",
    password: "",
    confirmPassword: "",
    code: "",
    email: "",
    title: "平台注册"
});

const emailLoading = ref(false);

/*获取验证码*/
const getCode = () => {
    emailLoading.value = true;
    //发送验证码API
    const obj = {
        title: '平台注册',
        email: registerForm.value.email
    };
    if (!obj.email) {
        return proxy.$modal.msgError('邮箱不能为空!');
    }

    getMailCode(obj).then(() => {
        // 调用倒计时函数
        countdown();
        proxy.$modal.msgSuccess('验证码获取成功!');
    }).finally(() => {
        emailLoading.value = false;
    });

};
/*倒计时*/
const countdown = () => {
    if (sendStateObj.value.sec <= 0) {
        sendStateObj.value.lock = false;
        sendStateObj.value.text = '重新获取';
        sendStateObj.value.sec = 60;
        clearTimeout(sendStateObj.value.timer);
    } else {
        sendStateObj.value.lock = true;
        sendStateObj.value.timer = setTimeout(() => {
            sendStateObj.value.sec--;
            sendStateObj.value.text = `${sendStateObj.value.sec}秒后重新获取`;
            countdown();
        }, 1000);
    }
};


/**
 * 校验两次密码是否输入正确
 */
const equalToPassword = (rule, value, callback) => {
    if (registerForm.value.password !== value) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};

const registerRules = {
    nickname: [{
        required: true, message: '请输入昵称', trigger: 'blur'
    }, {
        max: 6, min: 2, message: '昵称长度2-6', trigger: 'blur'
    }],
    password: [{
        required: true, message: '请输入密码', trigger: 'blur'
    }, { min: 5, max: 20, message: '密码长度必须介于 5 和 20 之间', trigger: 'blur' }],
    email: [{
        required: true, message: '请输入邮箱', trigger: 'blur'
    }, {
        pattern: /^[a-zA-Z0-9._%±]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱', trigger: 'blur'
    }, {
        min: 2,
        max: 25,
        trigger: 'change',
        message: "账号长度在5-25之间"
    }],
    code: [{
        required: true, message: '请输入验证码', trigger: 'blur'
    }],
    confirmPassword: [
        { required: true, trigger: "blur", message: "请再次输入您的密码" },
        { required: true, validator: equalToPassword, trigger: "blur" }
    ],
};

const loading = ref(false);

function handleRegister() {
    proxy.$refs.registerRef.validate(valid => {
        if (valid) {
            loading.value = true;
            useUserStore().register(registerForm.value).then(() => {
                router.push({ path: "/" });
            }).catch(() => {
                loading.value = false;
            })
        }
    });
}

</script>

<style lang='scss' scoped>
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: url("../assets/images/login-background.png");
    background-size: 100% 100%;

    .box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .left-text {
            width: 300px;
            height: 85px;
        }
    }
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.register-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 40px;

        input {
            height: 40px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
    }
}

.register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.register-code {
    width: 33%;
    height: 40px;
    float: right;
    margin-left: 10px;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.register-code-img {
    height: 40px;
    width: 100%;
}
</style>
